import { getFindTreeDepts, fetchList } from "@/api/admin/user";
import type { PaginationProps } from "@pureadmin/table";
import dayjs from "dayjs";
import {
  ElForm,
  ElInput,
  ElFormItem,
  ElProgress,
  ElMessageBox
} from "element-plus";
import {
  type Ref,
  h,
  ref,
  toRaw,
  watch,
  computed,
  reactive,
  onMounted
} from "vue";
export function useUser(tableRef: Ref, treeRef: Ref) {
  // 定义树数据 listQuery 对象 和列表
  const listTreeQuery = ref({
    page: 1,
    limit: 10,
    deptName: "",
    treeDeptParentId: -1, //全部传-1
    username: "",
    status: "",
    roleId: ""
  });
  const listLoading = ref(false);
  const listTree = ref([]);
  const provincialCenterId = ref(0);
  const treeExpandData = ref([]);
  const listData = ref([]);
  const roleData = ref([]);
  //表头
  const columns: TableColumnList = [
    {
      label: "序号",
      prop: "id",
      width: 90
    },
    {
      label: "用户名",
      prop: "username",
      minWidth: 130
    },
    {
      label: "姓名",
      prop: "name",
      minWidth: 130
    },
    {
      label: "手机号",
      prop: "phone",
      minWidth: 130
    },
    {
      label: "邮箱",
      prop: "email",
      minWidth: 130
    },
    {
      label: "角色",
      prop: "strRoles",
      minWidth: 130
    },
    {
      label: "部门",
      prop: "deptName",
      minWidth: 130
    },
    {
      label: "用户状态",
      prop: "status",
      minWidth: 90,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
          v-model={scope.row.status}
          active-value={1}
          inactive-value={0}
          active-text="已启用"
          inactive-text="已停用"
          inline-prompt
        />
      )
    },
    {
      label: "注册时间",
      minWidth: 90,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      slot: "operation"
    }
  ];
  const defaultProps = ref({
    children: "children",
    label: "deptName"
  });
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  function handleFilter() {}
  function handleSelectionChange() {}

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }

  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
  }
  function getTreelist() {
    getFindTreeDepts(listTreeQuery).then(res => {
      listTree.value = res.datas;
      provincialCenterId.value = listTree.value[0].id;
      getRoleTreeRootNode(provincialCenterId);
    });
  }
  function getRoleTreeRootNode(id) {
    treeExpandData.value.push(id);
  }
  function handleNodeClick() {}
  function getList() {
    listLoading.value = true;
    fetchList(listTreeQuery)
      .then(response => {
        listData.value = response.data;
        pagination.total = response.count;
        pagination.pageSize = response.size;
        pagination.currentPage = response.pages;
        listLoading.value = false;
      })
      .catch(() => {
        listLoading.value = false;
      });
  }
  onMounted(async () => {
    getList();
    // 归属部门
    getTreelist();
  });
  return {
    listTree,
    listTreeQuery,
    columns,
    pagination,
    getList,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    handleFilter,
    handleNodeClick,
    getTreelist,
    defaultProps,
    roleData,
    listLoading,
    listData
  };
}
